<template>
	<view class="content">
		<view class="item" v-for="(item, index) in collectList" :key="index">
			<view class="left">
				<view class="headImg">
					<image :src="item.head_img"></image>
				</view>
				<view class="grade">
					<uni-icon type="like" size="13" :color="it" v-for="(it, ind) in item.total_num" :key="ind"></uni-icon>
				</view>
			</view>
			<view class="right">
				<view class="title">
					<view>{{item.name}}</view><view class="labelBox"><image src="../../../static/image/attestation1.png"></image>母婴学院认证</view>
				</view>
				<view class="desc">
					{{item.introduce}}
				</view>
				<view class="price"> 
					￥<text>{{item.price}}</text>元/26天
				</view>
			</view>
			<button class="submit" :data-matronid="item.matron_id" :data-ind="index" @click="offCollect">取消收藏</button>
		</view>
		<view class="hint">暂无更多收藏 |<text @click="openWomanList">\t前往月嫂中心</text></view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue";
	import { dns } from "@/pages/dns.js";
	export default {
		data(){
			return {
				ifshow: false,
				collectList: [],
				likeList: ['#e8e8e8','#e8e8e8','#e8e8e8','#e8e8e8','#e8e8e8']
			}
		},
		components: {
			uniIcon
		},
		onLoad() {
			this.getCollectList()
		},
		methods:{
			getCollectList(){//获取收藏月嫂列表
				uni.showLoading({
					title: '请稍后'  
				});  
				uni.request({
					method:'GET',
					data:{
						page: 1,
						limit: 200
					},
					header:{
						token: uni.getStorageSync("token")
					}, 
					url: dns + 'matroncollect/lists',
					success:(res)=>{
						// console.log(res)
						if(res.data.status == 1){
							this.collectList = res.data.data;
							var totalList = res.data.data;
							totalList.forEach((value,index)=>{
								var likeList = ['#e8e8e8','#e8e8e8','#e8e8e8','#e8e8e8','#e8e8e8']
								likeList.forEach((val,ind)=>{
									if(ind<=Math.floor(value.total_num-1)){
										likeList[ind] = '#e04f47'
									}
								})
								totalList[index].total_num = likeList;
							})
							this.collectList.total_num = totalList
							uni.hideLoading();
						}
						if(res.data.status == 0){
							this.ifshow = true;
							uni.hideLoading();
						}
						if(res.data.status == -1){
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}
				})
			},
			offCollect(e){//取消收藏
				let matron_id = e.currentTarget.dataset.matronid;
				let ind = e.currentTarget.dataset.ind;
				uni.request({
					method: 'GET',
					data: {
						matron_id: matron_id
					},
					header:{
						token: uni.getStorageSync("token")
					},
					url: dns + 'matroncollect/delete',
					success: (res)=>{
						console.log(res);
						if(res.data.status == 1){
							uni.showToast({
								title: '已取消'
							})
						}
						this.collectList.splice(ind,1)
					}
				})
			},
			openWomanList(){//进入失效券
				uni.navigateTo({
					url: '../../index/list/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	$text-color: #f8bc87;
	page{
		height: 100%;
	}
	.content{
		height: 100%;
		background-color: #f6f6f6;
		padding-top: 10upx;
		.hint{
			text-align: center;
			font-size: 24upx;
			color: #7f7f7f;
			margin-top: 20upx;
			text{
				color: #ed702d;
			}
		}
		.item{
			position: relative;
			display: flex;
			padding: 40upx 40upx;
			background-color: #fff;
			margin-bottom: 15upx;
			.left{
				width: 140upx;
				margin-right: 30upx;
				.headImg{
					width:  140upx;
					height:  140upx;
					border-radius: 50%;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.right{
				flex: 1;
				.title{
					display: flex;
					font-size: 38upx;
					margin-bottom: 10upx;
					.labelBox{
						position: relative;
						font-size: 20upx;
						font-weight: 400;
						color: $text-color;
						padding-left: 34upx;
						line-height: 55upx;
						margin-left: 10upx;
						font-weight: 600;
						image{
							position: absolute;
							top: 8upx;
							left: 0upx;
							width: 32upx;
							height: 32upx;
						}
					}
				}
				.desc{
					font-size: 30upx;
					color: #7f7f7f;
					margin-bottom: 10upx;
				}
				.price{
					color: #7f7f7f;
					font-size: 30upx;
					text{
						color: #f4984b;
						font-size: 38upx;
					}
				}
			}
			.submit{
				position: absolute;
				bottom: 40upx;
				right: 40upx;
				margin: 0;
				border: none;
				width: 156upx;
				padding: 0;
				display: inline-block;
				background-color: #fff;
				font-size: 24upx;
				text-align: center;
				border-radius: 30upx;
				margin-left: 20upx;
				border: 2upx solid #f3a47c;
				color: #f5984b;
				line-height: 50upx;
			}
		}
	}
</style>
